<!DOCTYPE html>
<html lang="en">
	
	
	<head>
		<meta charset="utf-8" >
		<meta name ="viewport" content="width=device-width,initial-scale=1.0">
		<link rel="stylesheet" href="./css/style.css">
		<title>登录：管理员登录</title>
	</head>
	
	
	<body>
		<section>
			<!-- 背景色 -->
			<div class="color"></div>
			<div class="color"></div>
			<div class="color"></div>
			<div class="box">
				<!-- 背景图 -->
				<div class="circle" style="--x:0"></div>
				<div class="circle" style="--x:1"></div>
				<div class="circle" style="--x:2"></div>
				<div class="circle" style="--x:3"></div>
				<div class="circle" style="--x:4"></div>
				<!-- 登录框 -->
				<div class="container">
					<div class="form">
						<h2>登录</h2>
						<form >
							<div class="inputBox" >
								<input type ="text" placeholder="管理员电话" name="dh1" id="dh">
							</div>
							<div class="inputBox" >
								<input type ="password" placeholder="密码" name="mm1" id="mm">
							</div>
                            <span id="msg" style="color: red;margin:10px 0 -5px 0;display: block;"></span>
							<div class="inputBox">
								<input type ="button" value="登录" id="btn">
							</div>
							<p class="forget">忘记密码？
							  <a href="#">点击这里</a>
							</p>
							
						</form>
					</div>
				</div>
			</div>
		</section>
    <script> 
        var tel=/^1[35789][0-9]{9}$/;
        var pwd=/^[0-9a-zA-Z]{4,20}$/;

        btn.onclick=function(){
            if(!tel.test(dh.value)){
                msg.innerHTML='管理员账号格式错误'
                return
            }
            if(!pwd.test(mm.value)){
                msg.innerHTML='管理员密码格式错误'
                return
            }


            var xhr = new XMLHttpRequest()
            var url = 'http://127.0.0.1:8080/manlogin/managerlogin'
            xhr.open('POST',url,true)
            //修改请求主体的数据格式
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            //传递给后台的数据
            var obj = `dh1=${dh.value}&mm1=${mm.value}`
            //发送请求
            xhr.send(obj)
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    //将服务器json数据转为js对象
                    var rs = JSON.parse(xhr.responseText)
                    console.log(rs)
                    console.log(rs.data[0].mname)
                    if(rs.code === 1){
                        location.href = 'shoppinglist.html'
                        sessionStorage.setItem('mname',rs.data[0].mname)
                    }else{
                        msg.innerHTML = '用户名或密码错误'
                    }
                }
            }
        }




        
    </script>
    
	</body>
</html>
